<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onRowSelectChange="selectChange"
      isExportExcel2
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" slot-scope="props">
      </template>
    </FilterTable>
    <Drawer
      :title="dialogTitle"
      :visible.sync="showAddNew"
      :width="1500"
      :closable=true
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <complaindetil :type="handleType" :rowData="formData" @close="dialogClose"/>
    </Drawer>
  </div>
</template>

<script>
  import complaindetil from './complaindetil';
  import { dictionary } from '@/utils/dictMixin';
  import { region } from '@/api/cms-common/region';
  import { getArbitrationList, getRonoById,getCarByVin } from '@/api/customerService/complaint/complaintbill/index.js';
  import {
    complaintOrigin,
    cpSubtype,
    isFeedback,
    SySubtype,
    complaintSerious,
    complaintType,
    sjtype,
    status,
    jaStatus,
    completeTimely, xsSubtype, dzSubtype, fwSubtype, pjSubtype
  } from '../complaintbill/complaint';

  export default {
    mixins: [dictionary, region],
    name: 'index',
    components: {
      complaindetil
    },
    data() {
      this.saveData = null;
      return {
        dialogTitle: '',
        showAddNew: false,//显示弹出框
        handleType: '',
        conf: { add: '新增', edit: '编辑', show: '明细' },
        formData: {},
        columns: this.createTableColumns(),
        fetchApi: getArbitrationList,
        fetchParams: {},
        rowSelectData: [],
        topFilterList: this.createTopFilterList()
      };
    },
    methods: {
     async dialogedit(row, type) {
       this.handleType = type;
       this.formData={}
       if(row.ronoId){
         await getRonoById({ ronoId: row.ronoId }).then(res => {
           if (res.resultCode === 200) {
             this.formData = Object.assign({flag:true}, row, res.data.records[0]);
           } else {
             this.$notify.error({ title: '提示信息', message: res.errMsg || '服务器运行失败,请与管理员联系!' });
           }
         });
       }
       if (row.vin){
         await getCarByVin({ vin: row.vin }).then(res => {
           if (res.resultCode === 200) {
             if (this.formData.flag){
               this.formData = Object.assign({}, this.formData, res.data.records[0]);
             }else{
               this.formData = Object.assign({}, row, res.data.records[0]);
             }
           } else {
             this.$notify.error({ title: '提示信息', message: res.errMsg || '服务器运行失败,请与管理员联系!' });
           }
         });
       }
       if (!row.vin && !row.ronoId){
         this.formData = row
       }
       this.showHandler();
      },
      showHandler() {
        this.dialogTitle = `投诉单${this.conf[this.handleType]}`;
        this.showAddNew = true;
      },
      dialogClose() {
        this.showAddNew = false;
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      },
      selectChange(val) {
        console.log('val', val);
        this.rowSelectData = val;
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      changeHandle(val) {
        this.fetchParams = Object.assign({}, val);
      },
      createTopFilterList() {
        return [
          {
            type: 'INPUT',
            label: '投诉单号',
            fieldName: 'complaintNo'
          },
          {
            type: 'INPUT',
            label: '投诉人姓名',
            fieldName: 'complaintName'
          },
          {
            type: 'INPUT',
            label: '投诉人手机',
            fieldName: 'complaintPhone'
          },
          {
            type: 'SELECT',
            label: '投诉类型',
            fieldName: 'complaintType',
            change:this.changeComplaintType,
            placeholder: '请选择...',
            itemList: complaintType
          },
          {
            type: 'SELECT',
            label: '投诉子类',
            fieldName: 'complaintSubtype',
            placeholder: '请选择...',
            itemList: []
          },
          {
            type: 'SELECT',
            label: '投诉等级',
            fieldName: 'complaintSerious',
            placeholder: '请选择...',
            itemList: complaintSerious
          },
          {
            type: 'INPUT',
            label: 'VIN',
            fieldName: 'vin'
          },
          // {
          //   type: 'SELECT',
          //   label: '数据来源',
          //   fieldName: 'type',
          //   placeholder: '请选择...',
          //   itemList: sjtype
          // },
          // {
          //   type: 'SELECT',
          //   label: '投诉来源',
          //   fieldName: 'complaintOrigin',
          //   placeholder: '请选择...',
          //   itemList: complaintOrigin
          // },
          {
            type: 'SELECT',
            label: '处理状态',
            fieldName: 'status',
            placeholder: '请选择...',
            itemList: status
          },
          {
            type: 'SELECT',
            label: '结案状态',
            fieldName: 'jastatus',
            placeholder: '请选择...',
            itemList: jaStatus
          }
        ];
      },
      changeComplaintType(type){
        this.topFilterList.forEach(item=>{
          if (type==='X'&& item.fieldName=='complaintSubtype'){//销售的子类
            item.initialValue=''
            item.itemList=xsSubtype
          }else if (type==='D'&& item.fieldName=='complaintSubtype'){ // 电桩的子类
            item.initialValue=''
            item.itemList=dzSubtype
          }else if (type==='F'&& item.fieldName=='complaintSubtype'){ //服务的子类
            item.initialValue=''
            item.itemList=fwSubtype
          }else if (type==='P'&& item.fieldName=='complaintSubtype'){ //配件的子类
            item.initialValue=''
            item.itemList=pjSubtype
          }else if(type==='C'&& item.fieldName=='complaintSubtype'){ //产品
            item.initialValue=''
            item.itemList=cpSubtype
          }
        })
      },
      createTableColumns() {
        return [
          {
            title: '操作',
            dataIndex: 'column-action',
            width: 60,
            fixed: 'left',
            render: (props, h) => {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.dialogedit(props.row, 'show')}>
                    编辑
                  </el-button>
                </div>
              );
            }
          },
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            fixed: 'left',
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '投诉单编号',
            fixed: 'left',
            dataIndex: 'complaintNo',
            sorter: true
          },
          {
            title: '投诉类型',
            dataIndex: 'complaintType',
            sorter: true,
            dictItems: complaintType
          },
          {
            title: '投诉子类',
            dataIndex: 'complaintSubtype',
            sorter: true,
            dictItems: SySubtype
          },
          {
            title: '数据来源',
            dataIndex: 'type',
            sorter: true,
            dictItems: sjtype
          },
          {
            title: '投诉来源',
            dataIndex: 'complaintOrigin',
            sorter: true,
            dictItems: complaintOrigin
          },
          {
            title: '处理人',
            dataIndex: 'handleBy',
            sorter: true
          },
          {
            title: '处理状态',
            dataIndex: 'status',
            sorter: true,
            dictItems: status
          },
          {
            title: '处理完成时间',
            dataIndex: 'created_at',
            dateFormat: 'yyyy-MM-dd hh:mm:ss',
            sorter: true
          },
          {
            title: '结案状态',
            dataIndex: 'jaStatus',
            sorter: true,
            dictItems: jaStatus
          },
          {
            title: '结案时间',
            dataIndex: 'completeTime',
            dateFormat: 'yyyy-MM-dd hh:mm:ss',
            sorter: true
          },
          {
            title: '是否回访',
            dataIndex: 'isFeedback',
            sorter: true,
            dictItems: isFeedback
          },
          {
            title: '是否及时处理',
            dataIndex: 'completeTimely',
            sorter: true,
            hidden:true,
            dictItems: completeTimely
          },
          {
            title: '被投诉部门',
            dataIndex: 'department',
            sorter: true
          },
          // {
          //   title: '被投诉员工',
          //   dataIndex: 'beComplainTemp',
          //   sorter: true
          // },
          {
            title: '车牌号',
            dataIndex: 'license',
            sorter: true
          },
          {
            title: '车主姓名',
            dataIndex: 'ownerName',
            sorter: true
          },
          {
            title: '投诉人姓名',
            dataIndex: 'complaintName',
            sorter: true
          },
          {
            title: '投诉人电话',
            dataIndex: 'complaintPhone',
            sorter: true
          },
          {
            title: '投诉摘要',
            dataIndex: 'complaintSummary',
            sorter: true
          },
          {
            title: '投诉原因',
            dataIndex: 'complaintReason',
            sorter: true
          },
          {
            title: '解决方案',
            dataIndex: 'resolvent',
            sorter: true
          }
        ];
      }
    }
  };
</script>

<style scoped>

</style>
